<template>
  <van-popup v-model:show="showMenu" position="left" :style="{ width: '75%', height: '100%' }">
    <div class="wrap">
      <div class="info">
        <van-image class="avatar" round :src="avatarUrl" fit="cover" />
        <router-link to="/user" v-if="userInfo != ''">
        
          <p class="name" >{{ userInfo.nickname }}</p>
        </router-link>
        <p class="name" v-else>
          <router-link :to="'/login'">去登录</router-link>
        </p>
      </div>

      <van-cell-group inset>
        <van-cell title="我的消息" is-link icon="envelop-o" />
        <van-cell title="云贝中心" is-link icon="diamond-o">
          <template #right-icon>
            <van-button type="primary" size="mini" @click="hdYunbeiSign"> 已签到{{ yunDay }}天,共{{ yunShells }}云贝
            </van-button>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
  </van-popup>
</template>

<script setup>
import { reactive, toRefs, ref, onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import { userStore } from '@/store/user'
import { PlayStore } from '@/store/playlist'
import {  yunbei, yunbeiInfo, yunbeiToday, yunbeiSign } from '@/request/api/api'
import { Toast } from 'vant';

const $userStore = userStore();
const playStore = PlayStore();
const { userInfo } = storeToRefs($userStore);
const { playList,playListIndex } = storeToRefs(playStore);

const showMenu = ref(false);

let avatarUrl = ref('https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg');
onMounted(() => {
  if (userInfo.value != '') {
    avatarUrl.value = userInfo.value.avatarUrl;
  }
  initData()
})

// 初始化数据
const initData = () => {
    // initYunbei();
}

// 云贝签到天数
// let yunDay = ref(0);
// let yunShells = ref(0);
// const initYunbei = () => {
//   yunbei().then(yundata => {
//     yunDay.value = yundata.data.days;
//   });

//   yunbeiInfo().then(data => {

//   })
// }

// // 云贝信息
// const hdYunbeiSign = () => {
//   yunbeiToday().then(data => {
//     if (data.shells == 0) {
//       yunbeiSign().then(data => {
//         Toast.success('签到成功，获得' + data.point + '云贝')
//         // console.log(data);
//       })
//     } else {
//       Toast.fail('今日已签到')
//     }
//   })

// }




defineExpose({ showMenu })
</script>
  
<style lang='less' scoped>
.wrap {
  background-color: #F5F5F5 !important;
  height: 100%;
  padding: 20px 10px;
  box-sizing: border-box;

  .info {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;

    .avatar {
      width: 80px;
      height: 80px;
    }

    .name {
      font-size: 28px;
      margin-left: 20px;
    }
  }

  .van-cell-group {
    margin-top: 40px;
  }
}
</style>